<script type="text/javascript">
var sTop, sLeft, sWidth, sHeight;
var maxWidth = 800, maxHeight = 500;
var oBorder = '#cropBorder'
var oWrapper = '.cropImageWrapper';

$(document).ready(function() {
  setCropParams();
  drawMask();
});

$( oBorder ).draggable({
    containment: ".cropImageWrapper",
    scroll: false,
//    grid: [10, 10],
    drag: function() {
        setCropParams();
        showCropParams();
//        drawMask();
    },
    stop: function() {
        setCropParams();
        showCropParams();
        drawMask();
    }
});

$( oBorder ).resizable({
    containment: ".cropImageWrapper",
    aspectRatio: 220 / 280,
    minWidth: 220,
    stop: function() {
        setCropParams();
        showCropParams();
        drawMask();
    }
});

function setCropParams() {
    target = $( oBorder );
    
    sWidth = target.width();
    sHeight = target.height();
    sTop = target.position().top;
    sLeft = target.position().left;
}

function showCropParams() {
    $('#width').text(sWidth);
    $('#height').text(sHeight);
    $('#top').text(sTop);
    $('#left').text(sLeft);
}

function drawMask() {
    var styles;
    //draw cell 1
    styles = {
        width: sLeft,
        height: maxHeight,
        top: 0,
        left: 0
    };
    $('#cropMask_1').show().css(styles);
    
    //draw cell 2
    styles = {
        width: maxWidth - (sLeft + sWidth) - 1,
        height: maxHeight,
        top: 0,
        left: sLeft + sWidth + 2
    };
    $('#cropMask_2').show().css(styles);
    
    //draw cell 3
    styles = {
        width: sWidth + 2,
        height: sTop,
        top: 0,
        left: sLeft
    };
    $('#cropMask_3').show().css(styles);
    
    //draw cell 4
    styles = {
        width: sWidth + 2,
        height: maxHeight - (sTop + sHeight) - 2,
        top: sTop + sHeight + 2,
        left: sLeft
    };
    $('#cropMask_4').show().css(styles);
}

/*-----------------------------------------------------------------------------
 USE HTML5
 -----------------------------------------------------------------------------*/
//var R = Raphael("cropImageWrapper", 800, 500);
//var myCircle = R.circle(0, 0, 50);
//myCircle.attr("fill", "#f00");
//
//var start = function () {
//        this.ox = this.attr("cx");
//        this.oy = this.attr("cy");
//    },
//    move = function (dx, dy) {
//        this.attr({cx: this.ox + dx, cy: this.oy + dy});
//    };
//    
//R.set(myCircle).drag(move, start);
</script>